// 封装一个getScrollOffset方法求滚动条的距离(没有兼容性问题)
function getScrollOffset() {
    if (window.pageYOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset,
        }
    } else {
        return {
            y: document.body.scrollTop + document.documentElement.scrollTop,
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
        }
    }
}







// 封装兼容性方法，返回浏览器可视区窗口的尺寸getViewportOffset()方法
function getViewportOffset() {
    if (window.innerHeight) {
        return {
            width: window.innerWidth,
            height: window.innerHeight,
        }
    } else {
        if (document.compatMode == "BackCompat") {
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight,
            }
        } else {
            return {
                width: document.documentElement.clientHeight,
                height: document.documentElement.clientWidth,
            }
        }
    }
}









// 封装一个方法求一个元素离文档的left和top的距离
function getElementPostioin(target) {
    var left = 0;
    var top = 0;

    function getElementleft(target) {
        left += target.offsetLeft
        top += target.offsetTop
        if (target == document.body) {
            return
        }
        target = target.offsetParent
        getElementleft(target);
    }
    getElementleft(div1);
    return {
        left: left,
        top: top,
    }
}
getElementPostioin(div1);







// 封装方法getStyle()  返回元素的样式，例如width height left(非常常用)
function getStyle(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    } else {
        return elem.currentStyle[prop]
    }
}
console.log(getStyle(div, 'height'));











// 封装没有兼容性的addEvent(elem, type, handle); 方法(解决绑定事件的兼容性问题)
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false)
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}
addEvent(div, 'click', function () {
    console.log('test')
})











// 取消冒泡和阻止默认事件
// 取消冒泡：
// W3C标准event.stopPropagation(); 但是不支持IE9以下版本
// IE独有event.cancelBubble = true;
// 封装取消冒泡的函数stopBubble(event);
function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation()
    } else {
        event.cancelBubble = true
    }
}






// 阻止默认事件：
// 默认事件一：表单提交,a标签跳转,右键菜单等
// 1.return false；以对象属性的方式注册的事件才生效
// 2.event.preventDefault(); W3C标准，IE9以下不兼容
// 3.event.returnValue = false; 兼容IE
// 封装阻止默认事件的函数cancelHandler(event);
function cancelHandler(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false
    }
}
document.oncontextmenu = function (e) { //oncontextmenu是鼠标右击菜单事件
    cancelHandler(e);
}







// 封装onload方法的兼容性方法
if (script.readyState) {
    script.onreadystatechange = function () {
        //IE
        if (script.readyState == "complte" || script.readyState == "loaded") {
            //加载完毕
        }
    }
} else {
    script.onload = function () {
        //加载完毕
    }
}










// 发邮件
if (confirm("是否发邮件")) {  //提示框
    window.location = "mailto:2487016654@qq.com?subject=需求&body=测试邮箱发送";
}

